<template>
  <el-row :span="24" style="border-bottom: none">
    <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="box-card-tit">
            <span>订单明细</span>
            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
          </div>
          <div class="box-card-ul" v-for="(item,ind) in datalist.slice(0,7)" :key="ind">
            <div class="box-card-li">
              <div class="title">{{item.title}}</div>
              <div class="statu">{{item.statu === 1 ? '进行中':''}}</div>
              <div class="pop">{{item.type === 1 ? 'pop':'道具'}}</div>
              <div class="name">{{item.name}}</div>
              <div class="mobile">{{item.mobile}}</div>
              <div class="address">{{item.address}}</div>
              <div class="money">{{item.money}}</div>
              <div class="time">{{item.time}}</div>
            </div>
          </div>
        </el-card>
    </el-col>
  </el-row>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getStaticUserInfo} from '@/utils/user'

  export default {
    props: {
      indexData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data() {
      return {
        userInfo: getStaticUserInfo(),
        bol: false,
        msgList: [],
        datalist:[
          {
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          },{
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          },{
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          },{
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          },{
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          },{
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          },{
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          },{
            title:'任务名任务名任务名任务名',
            statu:1,
            type:'pop',
            name:'张三',
            mobile:'17700084288',
            money:'99.00',
            time:'2021-01-01 09:15',
            address:'福建省厦门市湖里区福建省厦门市湖里区'
          }
        ],
        option2: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: 'item',
            data: [],
            type: 'line',
            areaStyle: {}
          }]
        },
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: 'item',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
      }
    },
    watch: {
      indexData: {
        deep: true,
        handler: function (newVal) {
          this.msgList = this.indexData.xtxx;
          if(this.indexData.fkje){
            let date = this.indexData.fkje.map(val => val.date)
            let count = this.indexData.fkje.map(val => parseFloat(val.count))
            this.option.xAxis.data = date
            this.option.series[0].data = count
            this.option.series[0].name = count
            this.$nextTick(() => {
              this.$refs.fkje.setOption(this.option)
            })
          }

          if(this.userInfo.user_type == 1) {
            let date2 = this.indexData.hdcc.map(val => val.date)
            let count2 = this.indexData.hdcc.map(val => parseFloat(val.count))
            this.option2.xAxis.data = date2
            this.option2.series[0].data = count2
            this.option2.series[0].name = count2
            this.$nextTick(() => {
              this.$refs.hdcs.setOption(this.option2)
            })
          }
        }
      }
    },

    methods: {},
  }
</script>

<style lang="scss" scoped>
.box-card-ul{
  display: flex;
  flex-direction: column;
  .box-card-li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 30px;
    padding: 7.5px 0;
    border-bottom: 1px solid #ebeef5;

    .title{
      width: 20%;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .statu{
      text-align: center;
      width: 7%;
    }
    .pop{
      text-align: center;
      width: 7%;
    }
    .name{
      text-align: center;
      width: 7%;
    }
    .mobile{
      text-align: center;
      width: 14%;
    }
    .address{
      text-align: center;
      width: 25%;
    }
    .money{
      text-align: center;
      width: 5%;
    }
    .time{
      text-align: right;
      width: 15%;
    }
  }
  .box-card-li:last-of-type{
    border-bottom: 1px solid #ebeef5;
  }
}

.box-card {
  width: 100%;
  .box-card-tit{
    display: flex;
    justify-content:space-between;
    align-items: center;
  }
}
</style>
